<template>
  <div class="questions-container">
    <!-- 加载状态 -->
    <p v-if="loading">加载中...</p>

    <!-- 错误状态 -->
    <p v-else-if="error">{{ error }}</p>

    <!-- 成功：渲染问题列表 -->
    <div v-else>
      <div v-for="(question, index) in questions" :key="question.id" class="question-item" @click="HotDetailedContent(question.qaId)"
        >
        <span class="serial-number">{{ index + 1 }}</span>
        <div class="item-content">
          <h1 class="question-name">{{ question.question }}</h1>
          <div class="some-content">{{ question.answerContent }}</div>

        </div>
      </div>
    </div>
  </div>
</template>

<script>
import http from '@/api/http';

export default {
  name: 'QuestionList',
  data() {
    return {
      questions: [],   // 存储问题列表
      loading: true,
      error: null
    };
  },

    async mounted() {
    try {
      // 请求后端接口获取问题列表
      //const response = await axios.get('/api/questions'); // 例如：返回问题数组
      var data = await http.post('/api/Essay/GetHotQuestions');
      /*const data =[
           {
             "id": 1,
             "name": "Vue 中 v-if 和 v-show 有什么区别？",
             "content": "v-if 是条件渲染，v-show 是切换 display 样式。"
           },
           {
             "id": 2,
             "name": "如何在 Vue 中使用 axios？",
             "content": "可以通过 npm 安装 axios，并在组件中导入使用。"
           },
           {
             "id": 3,
             "name": "什么是 Vue 生命周期？",
             "content": "Vue 实例从创建到销毁的过程称为生命周期。"
           }
         ]
   */

      //const dataarry = [data.data];
      // 确保 data 是数组
      //console.log(dataarry);
      //if (Array.isArray(dataarry)) {

        this.questions =data.data //dataarry;
       
       
      //} else {
        //this.error = '数据格式错误：期望一个数组';
     // }
    } catch (err) {
      this.error = '获取问题列表失败：' + (err.message || '未知错误');
      console.error(err);
    } finally {
      this.loading = false;
    }
  },

    methods: {
 HotDetailedContent(qid) {
  console.log(qid)
      if (qid != null && qid !== '') {
        this.$router.push({
          path: '/hotproblemdetail',
          query: { qid }
        });
        console.log(qid+'123123')
      }

    }



  }


};
</script>

<style scoped>
.questions-container {
  max-width: 800px;
  margin: 20px auto;
  padding: 0 16px;
}

.question-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid #eee;
}

.serial-number {
  flex: 0 0 30px;
  font-weight: bold;
  color: #333;
}

.item-content h1 {
  display: inline;
  margin: 0;
  font-size: 1.3em;
  color: #1a1a1a;
}

.some-content {
  color: #555;
  margin-top: 6px;
  font-size: 0.95em;
}
</style>